<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue全局组件案例</title>
    <script src="vue.js"></script>
    
</head>

<body>
    <div id="app1" style="background-color: green;">
        <helloworld></helloworld>
        <helloworld></helloworld>
        <helloworld></helloworld>
    </div>
    <div id="app2" style="background-color: red;">
        <helloworld></helloworld>
        <helloworld></helloworld>
        <helloworld></helloworld>
    </div>

</body>

</html>
<script>
    //全局组件，template中必须只有一个根节点
    Vue.component("helloworld",{
        template:"<div><h3>helloworld</h3> <h4>蜗牛学员</h4></div>"
    });
    var vm = new Vue({
        el: "#app1",
       
    })
    var vm = new Vue({
        el: "#app2",
       
    })
</script>